
<template>
  <div
    class="index-grid"
    :style="gridStyle"
  >
    <dl
      v-for="(item,index) in indexData"
      :key="index"
      :class="calcEvenOddClass(index)"
    >
      <dt> {{ item.letter }}</dt>
      <dd
        v-if="item.data.length>0"
        class="index-grid__items"
      >
        <el-popover
          v-for="cn in Math.min(spans, item.data.length)"
          :key="`t${cn}`"
          :title="`资源名称：${item.data[cn-1].name}`"
          :content="`资源编码：${item.data[cn-1].code}`"
          v-bind="popperOptions"
        >
          <el-button
            slot="reference"
            type="text"
            size="small"
            @click="onSelect(item.data[cn-1])"
          >
            {{ item.data[cn-1].name }}
          </el-button>
        </el-popover>
      </dd>
      <div class="more">
        <el-popover
          v-if="item.data.length>spans"
          placement="top"
          trigger="click"
          popper-class="express-info-popper"
          :close-delay="0"
        >
          <el-button
            v-for="(c,ci) in item.data.slice(columns)"
            :key="ci"
            type="text"
            size="small"
            @click="onSelect(c)"
          >{{ c.name }}</el-button>
          <el-button
            slot="reference"
            type="info"
            size="xs"
            circle
            icon="el-icon-more"
          />
        </el-popover>
      </div>
    </dl>
  </div>
</template>
<script>
export default {
  name: 'IndexGrid',
  props: {
    items: {
      type: Array,
      default: () => {
        return []
      }
    },
    columns: {
      type: Number,
      default: 3
    },
    spans: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      activeTabname: 'common',
      popperOptions: {
        placement: 'bottom',
        width: '200',
        trigger: 'hover',
        popperClass: 'express-info-popper',
        openDelay: 400,
        closeDelay: 0
      }
    }
  },
  computed: {
    indexData() {
      return this.letterIndex(this.items)
    },
    calcEvenOddClass() {
      return index => {
        if (this.columns) {
          return index % (this.columns * 2) < this.columns && 'odd'
        } else {
          return ''
        }
      }
    },
    gridStyle() {
      return {
        '--grid-template-columns': this.columns || 3,
        '--grid-template-spans': this.spans || 3
      }
    }
  },
  watch: {},
  mounted() {},
  methods: {
    onSelect(item) {
      this.$emit('select', item)
    },
    letterIndex(listData) {
      const newArr = []
      const teamArr = []
      const other = []
      for (let i = 0; i < listData.length; i++) {
        var item = listData[i]
        var _char = item.abbr.substr(0, 1)
        var id = _char.charCodeAt() // 65
        if (id < 65) {
          id = '_'
          _char = '_'
          other.push(item)
          continue
        }
        if (!teamArr.includes(id)) {
          newArr.push({
            id: id,
            letter: _char,
            data: [item]
          })
          teamArr.push(id)
        } else {
          for (let n = 0; n < newArr.length; n++) {
            if (newArr[n]['id'] === id) {
              newArr[n].data.push(item)
              break
            }
          }
        }
      }
      this.sortArray(newArr, 'id')
      if (other.length) {
        newArr.push({
          id: 0,
          letter: '_',
          data: other
        })
      }
      return newArr
    },
    // data 数组，key 对象属性, 排序  asc / desc 正序倒序
    sortArray(data, key, order = 'asc') {
      if (order === 'asc') {
        data.sort((a, b) => a[key] - b[key])
      } else if (order === 'desc') {
        data.sort((a, b) => b[key] - a[key])
      }
      return data
    }
  }
}
</script>

<style lang="scss">
.index-grid {
  &:root {
    --grid-template-columns: 3;
    --grid-template-spans: 3;
  }
  $last-rule: &;
  display: grid;
  grid-template-columns: repeat(var(--grid-template-columns), 1fr);
  dl {
    display: flex;
    flex-wrap: nowrap;
    flex-flow: 0;
    margin: 0;
    padding: 5px 0;
    dt {
      width: 35px;
      font-weight: bold;
      padding: 9px 10px;
      line-height: 1;
      text-align: center;
    }
    &.odd {
      background: #f8f8f8;
    }
  }
  &__items {
    margin: 0;
    flex: 1;
    font-size: 12px;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(var(--grid-template-spans), 1fr);
    flex-basis: 80%;
    > * {
      overflow: hidden;
    }
    .el-popover__reference-wrapper {
      overflow: hidden;
      .el-popover__reference {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    & + .more {
      width: 18px;
      padding: 4px 0;
    }
  }
}
.express-info-popper {
  font-size: 12px;
  padding: 10px;
  max-width: 500px;
  &.el-popper[x-placement^='bottom'] {
    margin-top: 0;
  }
  .el-popover__title {
    font-size: inherit;
    margin-bottom: 10px;
  }
}
</style>
